/*
<--------------------------------------
--- FONTS ---
-------------------------------------->
*/

@font-face{ font-family: Casantn; src: url('fonts/CAS_ANTN.ttf'); }
@font-face{ font-family: Amerikaa; src: url('fonts/AMERIKA_.ttf'); }

/*
<--------------------------------------
--- HEADER ---
-------------------------------------->
*/
#header{
	background: url('images/header-bg.png') repeat-x;
	height: 60px;
}
/*
<--------------------------------------
--- LEFTSIDEBAR ---
-------------------------------------->
*/

	#rleftSidebar span.listTitle{
		font-size: 12pt;
		text-decoration: underline;
	}
		#leftSidebar #menu{
			-webkit-box-shadow: 0px 0px 20px #000;
			-webkit-border-radius: 15px;
		}
		#leftSidebar #menu ul li{
			font-family: casantn, 'Times New Roman' , Times, serif;
			font-style: normal;
			padding: 15px;
			background: url('images/list-style-bg.png') rgba(0,0,0, .5);
			height: 15px;

		}
		#leftSidebar #menu ul li.firstListChild{
			-moz-border-radius-topright: 15px;
			-webkit-border-top-right-radius: 15px;
			-moz-border-radius-topleft: 15px;
			-webkit-border-top-left-radius: 15px;
		}
		#leftSidebar #menu ul li.lastListChild{
			-moz-border-radius-bottomright: 15px;
			-webkit-border-bottom-right-radius: 15px;
			-moz-border-radius-bottomleft: 15px;
			-webkit-border-bottom-left-radius: 15px;
		}
			#leftSidebar #menu ul li a{
				color: #CBB47C;
				font-size: 12pt;
				letter-spacing: 2px;
			}
				#leftSidebar #menu ul li a:hover{
					text-decoration: none;
					color: #F6E9CF;
				}

/*
<--------------------------------------
--- LEFTSIDEBAR / LOGIN ---
-------------------------------------->
*/
#main{} 

	#main #loginForm{
		background: url('images/logg-left-bg.png');
		height: 200px;
		padding: 20px 0px 0px 20px;
		margin-bottom: 10px;
	}
	#main #loginForm p{
		font-size: 14px;
	}
	#main #loginForm input{
		width: 100px;
		margin: 5px 0px 5px 5px;
	}
		#main #loginForm input#submitLogin{
			background: url('images/list-style-bg.png') #000;
			color: #B4BA8D;
			height: 30px;
		}

/*
<--------------------------------------
--- MAIN INDEX ---
-------------------------------------->
*/
h2#mainIndexTitle{
	width: 520px;
	padding: 0px 120px 0px 20px;
	margin-bottom: -20px;
	text-align: center;
}
		
/*
<--------------------------------------
--- LOGGED IN MAIN ---
-------------------------------------->
*/
#main #mapholder img{
	border: 2px solid #000;
}

#main{

}
	#main #playerInfoBox{
		background: url('images/info-bg.png');
		min-height: 371px;
		max-height: 371px;
		margin-top: 25px;
	}
		#main #playerInfoBox .avatarImage img{
			max-width: 100px;
			min-width: 100px;
			margin: 45px 20px 10px 45px;
			border: 3px solid #000;
		}
		#main #playerInfoBox .avatarImage p{
			padding-right:20px;
			text-align:right;
		}
		#main #playerInfoBox .info{
			margin-top: 45px;
		}
			#main #playerInfoBox .info p,
			#main #playerInfoBox ul#games-list{
				font-family: casantn;
				font-size: 10pt;
			}
			#main #playerInfoBox span.info-val, 
			#main #playerInfoBox ul#games-list li{
				font-family: 'Times New Roman' , Times, serif;
				font-size: 20px;
			} 
			#main #playerInfoBox ul#games-list{
				margin-top: 10px;
				width: 300px;
			}
			#main #playerInfoBox ul#games-list li{
				display: inline;
			}
			#main #playerInfoBox #fileUpload{
				clear:both;
				max-width: 400px;
				min-width: 400px;
				margin: 45px 20px 10px 45px;
			}
			#main #playerInfoBox #fileUpload input{
			background: url('images/list-style-bg.png') #000;
			color: #B4BA8D;
			background-color:white;
			height: 30px;
			}
			.paddr{
				padding-right: 20px;
			}
			.paddl{
				padding-left: 20px;
			}
			.myGameList, .comingGameList{
				padding: 5px;
			}
			
			.myGameList a{
				font-size: 14pt;
				color: #826948;
			}
	
/*
<--------------------------------------
--- ON GAME MODE ---
-------------------------------------->
*/
.flag {
	position: absolute;
	z-index: 20;
}
.army {
	position: absolute;
	z-index: 20;
}

#gamemap {
	position: absolute;
	z-index: 0;
}
#canvas {
	position: absolute;
	z-index: 10;
}
#drawcanvas {
	position: absolute;
	z-index: 10;
}
	#main #options{
		background: rgba(230, 226, 214, .7);
		height: 100px;	
	}
	#main #options #colorpick{
		margin-top: 10px;
	}
	#main #options select{
		width: 120px;
	}
	#main #options label{
		color: #4F5142;
	}
	#main #options input{
		clear: both;
	}
		#main #options input#newprovince,
		#main #options input#newarmy,
		#main #options input#submitmap{
			height: 35px;
			margin-top: 5px;
			width: 120px;
		}
		img.okButton{
			width: 25px;
			vertical-align: bottom;
			margin: 0; padding: 0;
		}
	#main #mainGameBanner{
		background: url('images/bannerbg.png') no-repeat;
		height: 100px;
		margin: 10px;
		
	}
		
	#main h2#mainGameTitle{
		text-align: center;
		font-size: 20pt;
		padding-top: 12px;
		color: #B4B548;
	}
	
	#main #countryStats ul{
		position: absolute;
		margin-left:  -10px ;
		margin-top: -42px;
	}
		#countryStats ul li{
			font-family: Amerikaa;
			font-weight: lighter;
			font-style: normal;
			padding: 12px 15px 12px 15px;
			width: 130px;
			height: 15px;
			-webkit-box-shadow:inset 0 0 10px #000000;
			-moz-box-shadow:inset 0 0 10px #000000;
		}
		#main #countryStats ul li#austria-stats{ background: rgb(140,22,22);}
		#main #countryStats ul li#england-stats{ background: rgb(22,22,140);}
		#main #countryStats ul li#france-stats{ background: rgb(108,208,222);}
		#main #countryStats ul li#italy-stats{ background: rgb(41,93,27);}
		#main #countryStats ul li#turkey-stats{ background: rgb(210,210,80);}
		#main #countryStats ul li#germany-stats{ background: rgb(55,55,55);}
		#main #countryStats ul li#russia-stats{ background: rgb(218,218,218);}
		
			#main #countryStats ul li a{
				color: #fff;
				text-shadow:0px 0px 10px #000;
				font-size: 12pt;
				float: right;
			}
				#main #countryStats ul li a:hover{
					text-decoration: none;
				}
			#main #countryStats span.countryStatsItem{
				float: left;
				color: #fff;
				text-shadow:0px 0px 2px #000;
				font-size: 12pt;
			}

/*
<--------------------------------------
--- Datepicker ---
-------------------------------------->
*/
input#timepicker{
	color: #838383;
}
form#create_game_form input{
	width: 340px;
}
form#create_game_form label{
	color: #4F5142;
}
form#create_game_form input#submitNewGame{
	margin-top: 15px;
	height: 30px;
}
form#create_game_form input,
form#create_game_form label{
	margin-bottom: 15px;
}
#ui-datepicker-div{
	background: url('images/header-bg.png') #000;
	padding: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border: 3px #000 solid;
	display: none;
}	
	#ui-datepicker-div .ui-datepicker-title{
		text-align: center;
	}
	#ui-datepicker-div table{
		color: #CBB47C;
	}
	#ui-datepicker-div .ui-datepicker-header{
		color: #E2E6B5;
	}
	#ui-datepicker-div thead tr th{
		padding: 4px;
	}
	#ui-datepicker-div .ui-datepicker-next{
		float: right;
	}
	#ui-datepicker-div tbody td a{
		color: #fff;
		padding: 4px;
	}
	input#submitNewGame,
	form#finishmap input.formButton,
	#main input#addarmy{
		background: url('images/list-style-bg.png') #000;
		color: #B4BA8D;
		height: 40px;
		padding-top: 5px;
	}
	input#addarmy{
		margin: 30px 0px 0px 10px;
	}
	#gotogame{
		-webkit-border-radius: 5px;
		background: url('images/list-style-bg.png') #000;
		height: 40px;
		padding-top: 14px;
		text-align: center;
	}
	#gotogame a{
		color: #B4BA8D;
		font-size: 20pt;
		padding: 10px 50px 0px 50px;
		
	}

/*
<--------------------------------------
--- RIGHTSIDEBAR ---
-------------------------------------->
*/

#leftSidebar, #rightSidebar, #content{
margin-top: 20px;
}
#rightSidebar #userInfoSidebar{
background: url('images/logg-bg.png') rgba(230, 226, 214, .6);
height: 272px;
padding: 30px 0px 0px 20px;
margin-bottom: 10px;
}
	#rightSidebar #userInfoSidebar .loginFormStyle{
		width: 120px;
	}
	#rightSidebar #userInfoSidebar dt,
	#rightSidebar #userInfoSidebar dd{
		font-family: casantn;
		font-size: 14pt;
	}
	#rightSidebar #userInfoSidebar dl{
		padding-left: 10px;
	}
	#rightSidebar #userInfoSidebar dt{
		margin-top: 5px;
	}
	#rightSidebar #userInfoSidebar dd{
		margin: 5px 0px 0px 5px;
	}
	#rightSidebar #userInfoSidebar input{
		margin: 10px;
	}
		#rightSidebar #userInfoSidebar input#submitLogout{
			background: url('images/list-style-bg.png') #000;
			color: #B4BA8D;
			width: 150px;
			height: 30px;
			padding-top: 5px;
			margin-top: 20px;
		}

/*
<--------------------------------------
--- BOX ---
-------------------------------------->
*/
#box {
	z-index:800;
	position:fixed;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	opacity:0.0;
	background-color:black;
}/*
<--------------------------------------
--- POPUP ---
-------------------------------------->
*/
#popup {
	z-index:99999;
	position:fixed;
	background:url('../img/register_bg.jpg') rgba(255, 255, 255, 0.8);
	height:450px;
	width:600px;
	border:5px solid #352C22;
    -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;
	-moz-box-shadow: 0px 0px 10px #6B5D3A; -webkit-box-shadow: 0px 0px 10px #6B5D3A; box-shadow: 0px 0px 10px #6B5D3A;	
}
	#popup h2{
		text-align: center;
		margin-bottom: 5px;
	}

	#popup .left {
		float:left;
		margin-left: 30px;
		width:250px;
		}
	
	#popup .right {
		float:right;
		width:300px;
		}
	#popup .center {
		width:560px;
		text-align:left;
		padding:20px;
		}	
	
	#popup .footer {
		clear:both;
		width:600px;
		text-align: center;
	}
	#popup #button {
		background: url('images/list-style-bg.png') #000;
		color: #B4BA8D;
		height: 40px;
		margin-top: 10px;
		padding-top: 5px;
		}
	#popup input {
	    -moz-border-radius: 5px; 
		-webkit-border-radius: 5px; 
		border-radius: 5px;
		width:240px;
		}
	
	.popup_container h3{
		text-align: center;
	}
	.popup_container dl,
	.popup_container dt{
		margin-top: 10px;
		text-align: center;
	}
/*
<--------------------------------------
--- REGISTER ---
-------------------------------------->
*/
#register{
	z-index:99999;
	position:fixed;
	background-image:url('../img/register_bg.jpg');
	height:400px;
	width:600px;
	background-color: white;
	border:5px solid #0066CC;
	opacity:0;
    -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;
	-moz-box-shadow: 0px 0px 10px #33CCCC; -webkit-box-shadow: 0px 0px 10px #33CCCC; box-shadow: 0px 0px 10px #33CCCC;
}

	#register dl{
		padding: 20px;
	}
	#register dt{
		padding-top: 7px;
		font-family: 'helvetica', 'arial';
		font-size: 12px;
	}
	#register dd{
		padding-left: 10px;
		padding-top: 1px;
	}

	#register .left{
		float: left;
		width: 300px;
	}

	#register .right{
		float: right;
		width: 300px;
	}
	#register .footer{
		clear: both;
		width: 600px;
		text-align: center;
	}
	#register #button{
		background: #cc1;
		background-image:url("../img/button.png");
		-moz-border-radius: 5px;
		border-radius: 7px;
		padding: 2px;
		padding-left: 10px;
		padding-right: 10px;
		color: #fff;
		cursor: pointer;
		-moz-box-shadow: 0 0 10px #534438;
		box-shadow: 0 0 10px #534438;
	}
	#register input{
		width: 170px;
	}
/*
<--------------------------------------
--- BOX ---
-------------------------------------->
*/

#chat {
	font-family: "Sans-serif";
	font-size: 14px;
}

/* -------> CHATT STYLES <-------- */

.chat_room_fixed{
	background: url('images/info-bg.png');
	min-height: 371px;
	max-height: 371px;
	min-width: 520px;
	max-width: 520px;
	}
	.chat_room_fixed input {
		margin:0px 25px 0px 25px;
		background: rgba(221, 203, 163, 0.4);
		width: 450px;
		height: 25px;
		border: 1px solid rgba(83, 78, 52, 0.9);
		
		}
	.chat_room_fixed .chat_message_container {
		max-height:245px;
		min-height:245px;
		min-width:460px;
		max-width:460px;
		padding: 30px 30px 30px 25px;
		float:left;
	}
	.chat_room_fixed .chat_message_container dl {
		max-height:270px;
		min-height:270px;
		min-width:458px;
		max-width:458px;
		overflow: auto;
	}
		.chat_room_fixed .chat_message_container dt {
			font-family: Amerikaa;
			font-size: 12px;
			color: #454334;
			background: rgba(83, 78, 52, 0.5);
			-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
			min-width: 435px;
			max-width: 435px;
			height: 15px;
			padding: 0px 0px 2px 5px;
		}

		.chat_room_fixed .chat_message_container dd {
			margin:10px 5px 10px 10px;
			
		}

		.chat_room_fixed .chat_message_container div {
			color: #454334;
			float: right;
			width: 90px;
			font-size: 12px;
			padding: 5px 15px 0px 5px;
		}
		
.userslist {
	overflow: auto;
	max-width:200px;
	min-width:200px;
	background: url('images/logg-bg.png') rgba(230, 226, 214, .6);
	height: 272px;
	padding: 30px 0px 0px 20px;
	margin-top: 5px;
}
	.userslist input {
		background: rgb(230, 226, 214);
		width: 150px;
		border: 1px dotted; 
		text-align: left;
		height:30px;
		float:left;
	}
	.userslist div {
		background: rgb(230, 226, 214);
		width: 10px;
		border: 1px dotted; 
		text-align: left;
		height:30px;
		float:left;
	}
	.userslist input:hover{
		color: #000;
	}
.chat_popup_container {
	z-index:9999;
	position:fixed;
	top:20px;
	left:20px;
	width:200px;
	height:300px;
	font-family:'helvetica', 'arial';
	background-color:white;
	border-style:solid;
	border-width:2px;
	border-color:black;
	font-size:14px;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	-moz-box-shadow: 0 0 10px #333;box-shadow: 0 0 10px #333;
}

.chat_popup_container .chat_message_container {
	overflow:auto;
	max-height:240px;
	height:240px;
	max-width:200px;
	padding:2px;
	font-size:12px;
}

.chat_popup_container .exitRoom {
	position:absolute;
	left:180px;
	top:2px;
	height:18px;
	width:18px;
	cursor:pointer;
}
.chat_popup_container .minimize {
	position:absolute;
	left:160px;
	top:2px;
	height:18px;
	width:18px;
	cursor:pointer;
}
.chat_popup_container .maximize {
	position:absolute;
	left:180px;
	top:2px;
	height:18px;
	width:18px;
	cursor:pointer;
	display:show;
}
.chat_popup_container .invitePlayer {
	background-image:url('images/chat_popup_invite.png');
	position:absolute;
	left:140px;
	top:2px;
	height:18px;
	width:18px;
	cursor:pointer;
}
.chat_popup_container .newMessage {
	position:absolute;
	left:0px;
	top:-25px;
	cursor:pointer;
}

.chat_popup_container .chat_message_container dt {
	background-color: #0099FF;
	font-size:11px;
	font-weight:bold;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	padding:3px;
	margin:2px;
	margin-top:-8px;
}

.chat_popup_container .chat_message_container dd {
	background-color:white;
	padding:3px;
	margin:0px;
	margin-bottom:2px;
}

.chat_popup_container .chat_message_container div {
	position:relative;
	text-align:right;
	top:6px;
	left:-7px;
	font-size:9px;
}

.chat_popup_container .dragable {
	background-image:url('images/chat_popup_header.png');
	cursor:move;
	padding:4px;
	text-align:left;
	 font-family: Amerikaa; src: url('fonts/AMERIKA_.ttf');
	border-bottom:solid 1px darkblue;
	-moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
}
.chat_popup_container .userlist_in_popup {
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	min-width:80px;
	position:relative;
	z-index:9999999;
	background-color:white;
	border:solid 1px black;
	padding:0px 5px 5px 5px;
	top:19px;
	left:0px;
	}
	
	
.chat_popup_container .userList input {
	cursor:pointer;
	border:0px solid; 
	text-align:left;
	font-weight:bold;
	font-size:15px;
	padding:5px;
	margin:0px;	
	height:20px;
	background-color:white;
	width:60px;
	font-size:13px;
	color:darkblue;
	font-family: Amerikaa; src: url('fonts/AMERIKA_.ttf');
	}
.chat_popup_container input {
	margin:2px;
	width:189px;
}
/*
********* CHAT IN GAME!!!!!!
*/

.gameChatUserListContainer {
	z-index:11;
	position:absolute;
	}
.gameChatUserList input {
	background-color:transparent;
	border:none;
	cursor:pointer;
	}

.chatRoomInGame{
	z-index:#FCEAE2;
	border: 1px solid rgba(83, 78, 52, 0.9);	
	min-height: 350px;
	max-height: 350px;
	min-width: 500px;
	max-width: 500px;
	margin:0 auto;
	top:930px;
	background-color:white;
	position: absolute;
	z-index:999999;
	
	}
	.chatRoomInGame .chatFormContainer {
		position:relative;
		left:-380px;
		top:25px;
		}
		
	.chatRoomInGame	.dragableMainchat {
		background-color:blue;
		background-image:url('images/chat_in_game_header.png');
		height:25px;
		}
		
		.chatRoomInGame input {
			margin:0px 25px 0px 25px;
			background: #E9E8FD;
			width: 480px;
			height: 25px;
			border: 1px solid rgba(83, 78, 52, 0.9);
			font-family: 'helvetica', 'arial';
			font-size: 13px;
			color:black;
			}
			

			
		.chatRoomInGame .chat_message_container {
			padding-top:0px;
			max-height:250px;
			min-height:250px;
			min-width:490px;
			max-width:490px;
			padding-left: 20px;
			float:left;
		}
		.chatRoomInGame .chat_message_container dl {
			max-height:270px;
			min-height:270px;
			min-width:490px;
			max-width:490px;
			overflow: auto;
		}
		
			.chatRoomInGame .chat_message_container dt {
				font-family: 'helvetica', 'arial';
				font-size: 13px;
				color: black;
				background: #8282E8;
				-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
				min-width: 460px;
				max-width: 460px;
				height: 15px;
				padding: 5px 0px 3px 5px;
			}

		.chatRoomInGame .chat_message_container dd {
			margin:10px 5px 10px 10px;
			color:black;
			font-family: 'helvetica', 'arial';
		}

		.chatRoomInGame .chat_message_container div {
			color: black;
			float: right;
			width: 130px;
			font-size: 12px;
			padding: 5px 15px 0px 5px;
			font-family: 'helvetica', 'arial';			
		}
		
.chatRoomInGameUserlist {
	overflow: auto;
	max-width:200px;
	min-width:200px;
	background: url('images/logg-bg.png') rgba(230, 226, 214, .6);
	height: 272px;
	padding: 30px 0px 0px 20px;
	margin-top: 5px;
	position: fixed;
}
	.chatRoomInGameUserlist input {
		background: rgb(230, 226, 214);
		width: 150px;
		border: 1px dotted; 
		text-align: left;
		height:30px;
		float:left;
	}
	.chatRoomInGameUserlist div {
		background: rgb(230, 226, 214);
		width: 10px;
		border: 1px dotted; 
		text-align: left;
		height:30px;
		float:left;
	}
	.chatRoomInGameUserlist input:hover{
		color: #000;
	}


.comingGameList {
		font-size:14px;
	}
.comingGameList p {
	margin-top:0px;
	padding-top:0px;
	}
	
.comingGameListJoinButton {
	background-color:transparent;
	border:0px;
	text-align:left;
	margin-bottom:2px;
	padding-bottom:0px;
	}

#movebox{
	z-index: 100;
	position: absolute;
	border: 1px solid black;
	width: 200px;
	height: 100px;
	background: #605449;
	color: #DEDFB4;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow:inset 0 0 20px #000000;
	-moz-box-shadow:inset 0 0 20px #000000;
	text-align: center;
}
#moveboxmove, #moveboxsupportatk,
#moveboxsupportdef{
	cursor: pointer;
	margin: 13px 10px 10px 10px;
}

#gameTimer {
	font-size: 24pt;
}